<template>
	<view class="home">
		<view class="topContent">
			<view class="title">
				<view class="titleName">
					社群概览
				</view>
				<view class="right-content" v-if="false">
					<u-dropdown style="" > 
						<u-dropdown-item  v-model="optionVal1" :title="optionTitle1"  :options="options1" @change="optionChange1">

						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
			<view class="Arr">
				<view class="arrItem" v-for="(item,index) in associationList" :key="index" @click="goDetail(1,item)">
					<view class="cover">
						<image src="../../static/img/defaultCover.png" mode="aspectFit"></image>
					</view>
					<view class="textData">
						<view class="name">
							{{item.chat_data.name ? item.chat_data.name : '未命名群聊'}}
						</view>
						<view class="desc">
							{{item.chat_data.notice ? item.chat_data.notice : '暂无群简介'}}
						</view>
					</view>
				</view>
			</view>
			<navigator class="moreBtn" url="../allAssociation/allAssociation">查看全部</navigator>
			
			
		</view>
		<view class="middleContent" v-show="false">
			<view class="title">
				<view class="titleName">
					今日活跃热词
				</view>
				<view class="right-content" style="color: #2772FE;">
					查看昨日
				</view>
			</view>
			<view class="">
				<hotWords :greenData="greenData" :redData="redData"></hotWords>
			</view>
		</view>
		<view class="bottomContent" v-show="false">
			<view class="title">
				<view class="titleName">
					客户概览
				</view>
				<view class="right-content">
					<u-dropdown style="">
						<u-dropdown-item  v-model="optionVal2" :title="optionTitle2"  :options="options2" @change="optionChange2">
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
			<view class="echartData">
				<view class="charts-box">
				      <!-- <qiun-data-charts type="demotype" :opts="{xAxis:{axisLineColor:'#FFBB17',boundaryGap:'justify'}, yAxis:{gridType:'dash',}, legend:{show:false},color:['#FFBB17','#FFD267'],extra:{column:{width:20,linearType:'custom',seriesGap:5,linearOpacity:0.5,barBorderCircle:false,customColor:['#FFBB17','#FFD267']}}}" :chartData="chartsDataColumn5"/> -->
				      <view class="charts-box">
						<qiun-data-charts :canvas2d="true" canvasId="canvasId1" type="area" :opts="{legend:{show:false},extra:{area:{type:'curve',addLine:true,gradient:false}}}" :chartData="chartsDataColumn5"/>

					  </view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import hotWords from '@/component/hotWords/hotWords.vue'
	
	export default {
		data() {
			return {
				associationList:[],
				title: '',
				optionVal1 : 1,
				optionTitle1: '活跃',
				options1: [
					{
						label: '活跃',
						value: 1,
					},
					{
						label: '转化',
						value: 2,
					},
					{
						label: '增长',
						value: 3,
					}
				],
				optionVal2 : 1,
				optionTitle2: '成交',
				options2: [
					{
						label: '成交',
						value: 1,
					},
					{
						label: '复够',
						value: 2,
					},
					{
						label: '增长',
						value: 3,
					}
				],
				greenData:[
					'开学',
					'奥运会',
					'游戏',
					'暑假',
					'换季衣服',
				],
				redData:[
					'台风',
					'房价',
					'金牌',
				],
				chartsDataColumn5:{
					categories:[
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"10",
						"11",
						"12",
					],
					series:[
						{
							data:[
								31,
								32,
								33,
								34,
								35,
								36,
								35,
								34,
								33,
								34,
								33,
								34,
							],
							name:'完成量',
						},
					]
				},
			}
		},
		onLoad() {
		    let	_this = this
			let env = ''
			// #ifdef MP-WEIXIN
					wx.getSystemInfo({
						success(res){
							console.log(res);
							console.log(res.environment );
							// env = res.environment
							if(res.environment=='wxwork'){
								// 企业微信端
								  _this.getqywxCode()
							}else{
								// 微信小程序端
								  _this.getwxCode()
							}
						}
					})
			// #endif
			
			
		},
		methods: {
			async getAssociationList(){
				let res = await this.myhttp({
					url:'api/Xlqwapi/getCommunityList',
					data:{
						limit:'3',
					},
					method:'GET',
				}).then(res=>{
					if(res.data.msg=='成功'){
						this.associationList = res.data.data.data.group_chat_list
					}else{
						this.$refs.uToast.show({
								title: '获取数据失败',
								type: 'error',
						})
					}
				})
			},
			getwxCode (){
				let _this = this
				uni.login({
					success(res) {
						let code = res.code
						// console.log(code)
						_this.getUserInfo(code)
					}
				})
			},
			getqywxCode (){
				let _this = this
				uni.showLoading({
					title:'加载中'
				})
				// #ifdef MP-WEIXIN
					wx.qy.login({
							success(res) {
								console.log(res)
								console.log('企业微信登录成功');
							    _this.getEnterpriseLogin(res.code)
							},
							complete(){
								// 隐藏加载中
								uni.hideLoading()
							},
							fail(){
								console.log('企业微信登录失败');
								this.getqywxCode()
							},
					})
				// #endif
			},
			// 微信登录
			async getUserInfo(_code){
				
				let res = await this.myhttp({
					url:'api/xluser/wx_login',
					data:{
						code:_code
					},
				}).then(res=>{
					uni.setStorageSync('token', res.data.data.token);
					this.getAssociationList()
				})
			},
			// 企业微信登录
			async getEnterpriseLogin(_code){
				let res = await this.myhttp({
					method:'GET',
					url:'api/Xluser/qywx_login',
					data:{
						code:_code
					},
				}).then(res=>{
					uni.setStorageSync('token', res.data.data.token);
					this.getAssociationList()
				})
			},
			goDetail(_id){
				return
				uni.navigateTo({
					url:`../associationDetail/associationDetail?id=${_id}`
				})
			},
			optionChange1(_index){
				console.log(_index);
				this.optionTitle1 = this.options1[_index-1].label
			},
			optionChange2(_index){
				console.log(_index);
				this.optionTitle2 = this.options2[_index-1].label
			}
		},
		components:{
			hotWords,
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-dropdown__content{
		height: 300rpx !important;
		box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
	}
	/deep/ .u-cell_title{
		white-space: nowrap;
	}
	// /deep/ .u-border-bottom{
	// 	z-index: 99 !important;
	// 	background-color: #fff !important;
	// }
	
	.home {
		background-color: #f9f9f9;
		width: 100%;
		.topContent {
			background-color: #fff;
		  .title {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  padding: 20rpx;
			  margin: 10rpx 0;
			  color: #111111;
			  height: 80rpx;
				.titleName {
					font-weight: 600;
					font-size: 30rpx;
					margin-left: 30rpx;
					position: relative;
				}
				.titleName::before{
					content: '';
					position: absolute;
					left: -15%;
					top: 15%;
					width: 4rpx;
					height: 28rpx;
					background: #2772FE;
				}
			
				.right-content {
					border: 1px solid #EEEEEE;
					height: 60rpx;
					width: 120rpx;
					display: flex;
					align-items: center;
					
				}
		  }
		
		  .Arr {
			  display: flex;
			  flex-direction: column;
		    .arrItem {
				height: 180rpx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1px solid #E4E7ED;
		      .cover {
				  width: 25%;
				  display: grid;
				  place-items: center;
		        image {
					width: 160rpx;
					height: 160rpx;
		        }
		      }
		
		      .textData {
				  height: 100%;
				  padding: 18rpx;
				  width: 75%;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-evenly;
		        .name {
					font-size: 30rpx;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
		        }
		
		        .desc {
					width: auto;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #848484;
		        }
		      }
		    }
		  }
		
		  .moreBtn {
			display: grid;
			place-items: center;
			font-size: 34rpx;
			height: 90rpx;
			color: #888888;
		  }
		}
		
		.middleContent{
			margin-top: 38rpx;
			background-color: #fff;
			.title {
						  display: flex;
						  justify-content: space-between;
						  padding: 20rpx;
						  color: #111111;
							.titleName {
								font-weight: 600;
								font-size: 30rpx;
								margin-left: 30rpx;
								position: relative;
							}
							.titleName::before{
								content: '';
								position: absolute;
								left: -15%;
								top: 15%;
								width: 4rpx;
								height: 28rpx;
								background: #2772FE;
							}
						
							.right-content {
						
							}
			}
		
			
		}
		
		.bottomContent {
			margin-top: 38rpx;
			background-color: #fff;
			margin-bottom: 50rpx;
			.title {
						  display: flex;
						  justify-content: space-between;
						  align-items: center;
						  padding: 20rpx;
						  color: #111111;
						  height: 80rpx;
							.titleName {
								font-weight: 600;
								font-size: 30rpx;
								margin-left: 30rpx;
								position: relative;
							}
							.titleName::before{
								content: '';
								position: absolute;
								left: -15%;
								top: 15%;
								width: 4rpx;
								height: 28rpx;
								background: #2772FE;
							}
						
							.right-content {
								border: 1px solid #EEEEEE;
								height: 60rpx;
								width: 120rpx;
								display: flex;
								align-items: center;
								
							}
			}
					
		}
	}

	
</style>
